<!DOCTYPE html>
<html>
    <head>
        <title>Security</title>
        <% include ../common/link%>
        <style type="text/css">
			.col-auto-center{
				float: none; 
				margin-left:auto;
				margin-right:auto;
				display:block;
			}
            .warning{
                color:red;
            }
		</style>
    </head>
    <body>
        <% include ../common/header%>
        <div class="container-fluid col-xs-10 col-md-2 col-auto-center" style="margin-top:5%">
			<h3 class="text-center">Alter Password</h3>
			<form action="/users/updatePassword" method="post" id="pwdUpdate">
				<div class="form-group">
					<label for="exampleInputUsername1">Old Password</label>
					<input type="password" class="form-control" id="exampleInputUsername1" required placeholder="old password" name="oldpassword"></input>
                    <span class="warning"></span>
				</div>
				<div class="form-group">
					<div class="form-group">
						<label for="exampleInputPassword1">New Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" required placeholder="new password" name="newpassword"></input>
                        <span class="warning"></span>
					</div>
				</div>
                <div class="form-group">
					<div class="form-group">
						<label for="exampleInputPassword1">Confirm New Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" required placeholder="confirm password" name="confirmnewpassword"></input>
                        <span class="warning"></span>
					</div>
				</div>
                <div class="form-group text-center">
				    <input class="btn btn-primary" type="button" value="Update" name="btn_update"></input>
                </div>
			</form>
        </div>
        <% include ../common/footer%>
    </body>
    <script type="text/javascript">
        var oldpwd_pass = false;
        var newpwd_pass = false;
        var cfmpwd_pass = false;

        var oldpwd = "";
        var newpwd = "";
        var confirmnewpassword = "";

        function passVerify(){
            oldpwd = $("input[name='oldpassword']").val();
            newpwd = $("input[name='newpassword']").val();
            confirmnewpassword = $("input[name='confirmnewpassword']").val();

            if(oldpwd && oldpwd.length != 0){
                oldpwd_pass = true;
                $("input[name='oldpassword']").next().html("");
            }else{
                $("input[name='oldpassword']").next().html("old password cannot be empty");
                oldpwd_pass = false;
                return;
            }
            if(newpwd && newpwd.length != 0){
                newpwd_pass = true;
                $("input[name='newpassword']").next().html("");
            }else{
                $("input[name='newpassword']").next().html("new password cannot be empty");
                newpwd_pass = false;
                return;
            }
            if(confirmnewpassword && confirmnewpassword.length != 0){
                cfmpwd_pass = true;
                $("input[name='confirmnewpassword']").next().html("");
            }else{
                $("input[name='confirmnewpassword']").next().html("confirm new password cannot be empty");
                cfmpwd_pass = false;
                return;
            }
            return (oldpwd_pass && newpwd_pass && cfmpwd_pass);
        }

        $("input[name='btn_update']").on('click',function(){
            var result = passVerify();
            if(result){
                if(newpwd !== confirmnewpassword){
                    $("input[name='confirmnewpassword']").next().html("The two passwords you typed do not match");
                }else{
                    $("#pwdUpdate").submit();
                }
            }
        })
        
    </script>
</html>